<template>
  <div id="app">
    <NavHeader :user="user"/>
    <router-view />
    <NavFooter />
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';
import { GlobalDataProps } from './store';
import NavHeader from './components/NavHeader.vue';
import NavFooter from './components/NavFooter.vue';

export default defineComponent({
  name: 'App',
  components: {
    NavHeader,
    NavFooter
  },
  setup() {
    const store = useStore<GlobalDataProps>();
    const user = computed(() => store.state.user);
    return {
      user
    }
  }
});
</script>

<style>
*{
  padding: 0px;
  margin: 0px;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0px;
}
</style>
